<!--
 * @Author: Dee Dee
 * @Date: 2023-08-14 14:45:18
 * @LastEditors: Dee Dee
 * @LastEditTime: 2023-08-16 11:08:15
 * @FilePath: /培训认证系统20230814/src/views/vadmin/home/components/partOne/left.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
    <el-card class="stats-card">
        <el-row type="flex" justify="center" align="middle" style="margin-bottom:20px;">
            <el-col :xs="3" :sm="2" class="icon-col">
                <svg-icon icon-class='edit' :style="{ color: theme, fontSize: '28px' }" />
            </el-col>
            <el-col :xs="21" :sm="22" class="part1_title">我的考试</el-col>
        </el-row>
        <el-row class="stats-content">
            <el-col :xs="12" :sm="6" class="stat-item">
                <el-statistic group-separator="," :precision="0" :value="getTotalCount()" title="全部"></el-statistic>
            </el-col>
    
            <el-col :xs="12" :sm="6" class="stat-item">
                <el-statistic group-separator="," :precision="0" :value="getFailedCount()" title="进行中"></el-statistic>
            </el-col>
            <el-col :xs="12" :sm="6" class="stat-item">
                <el-statistic group-separator="," :precision="0" :value="getPassedCount()" title="已通过"></el-statistic>
            </el-col>
            <el-col :xs="12" :sm="6" class="stat-item">
                <el-statistic group-separator="," :precision="0" :value="getFailedCount()" title="未通过"></el-statistic>
            </el-col>
        </el-row>
        <div class="action-row">
            <el-button size="small" type="primary" round @click="goToExam">去考试</el-button>
        </div>
    </el-card>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import variables from "@/assets/styles/variables.scss";
import { listKnowledge } from "@/api/vadmin/course/course";

export default {
    name: "ExamStats",
    data() {
        return {
            loading: true,
        };
    },
    props: ["form"],
    computed: {
        ...mapState(["settings"]),
        variables() {
            return variables;
        },
        theme() {
            return this.$store.state.settings.theme;
        },
    },

    created() {
        this.getList();
    },
    methods: {
        /** 查询列表 */
        getList() {
            this.loading = true;
            listKnowledge({ chapter: this.chapter, course: this.course }).then(
                (response) => {
                    this.list = response.results;
                    this.loading = false;
                }
            );
        },
        goToExam() {
            this.$router.push('/exam/online');
        },
        // 安全获取通过数量
        getPassedCount() {
            return this.form && this.form.Passed ? this.form.Passed : 0;
        },
        // 安全获取失败数量
        getFailedCount() {
            return this.form && this.form.Failed ? this.form.Failed : 0;
        },
        // 安全获取总数
        getTotalCount() {
            const passed = this.form && this.form.Passed ? this.form.Passed : 0;
            const failed = this.form && this.form.Failed ? this.form.Failed : 0;
            return passed + failed;
        }
    },
};
</script>

<style lang="scss" scoped>
.stats-card {
    height: 100%;
}

.icon-col {
    text-align: center;
}

.stats-content {
    margin-bottom: 15px;
}

.stat-item {
    margin-bottom: 15px;
}

.action-row {
    text-align: center;
    margin-top: 10px;
}

@media screen and (max-width: 768px) {
    .icon-col {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .part1_title {
        font-size: 16px;
        font-weight: bold;
    }
    
    .action-row {
        .el-button {
            width: 100%;
            margin: 5px 0;
        }
    }
}
</style>
  